<div
  class="ma-progress {{type}}"
  ng-class="{
    success: status === 'success',
    warning: status === 'warning',
    danger: status === 'danger',
  }"
  ng-style="{
    width: size + 'px',
    height: type !== 'line' ? (size + 'px') : '',
  }"
>
  <svg
    ng-show="type === 'circle'"
    width="120px"
    height="120px"
    class="ma-progress-circle"
    viewBox="0 0 100 100">
    <path
      class="ma-progress-circle-trail" d="M 50,50 m 0,-47
      a 47,47 0 1 1 0,94
      a 47,47 0 1 1 0,-94"
      stroke-width="{{strokeWidth}}"
      fill-opacity="0"
      ng-style="{
        strokeDasharray: '295.31px, 295.31px'
      }"
    >
    </path>
    <path
      class="ma-progress-circle-path"
      d="M 50,50 m 0,-47
      a 47,47 0 1 1 0,94
      a 47,47 0 1 1 0,-94"
      stroke-linecap="round"
      stroke-width="{{strokeWidth}}"
      fill-opacity="0"
      ng-style="{
        strokeDasharray: (295.31 * (percent / 100)) + 'px, 295.31px'
      }"
      style=""
    >
    </path>
  </svg>
  <div
    class="ma-progress-line"
    ng-show="type === 'line'"
  >
    <div
      class="ma-progress-line-trail"
      ng-style="{
        height: strokeWidth + 'px',
        width: size + 'px',
      }"
    >
      <div
        class="ma-progress-line-path"
        ng-style="{
          width: percent + '%'
        }"
      ></div>
    </div>
  </div>
  <div class="ma-progress-content" ng-transclude></div>
</div>
